<template>
	<view>
		<view class="receiving_orders">
			<view class="call_user">
				<view class="call_user_content">
					<view class="call_user_left">
						<view>
							<image src="../../static/img/call_user.png"></image>
						</view>
						<view>请致电客户确认以下信息</view>
					</view>
					<view class="call_user_right" @click="call_user">
						<view>联系客户</view>
						<view>
							<image src="../../static/img/user_phone.png"></image>
						</view>
					</view>
				</view>
			</view>
			<view class="order_detail">
				<view class="order_detail_item1" @click="to_order">
					<view class="order_detail_icon">
						<image src="../../static/img/order_detail_icon.png"></image>
					</view>
					<view class="order_detail_text">订单详情</view>
					<view class="to_order_detail">
						<image src="../../static/img/back.png"></image>
					</view>
				</view>
				<view class="order_detail_item2">
					<view class="order_no_text">订单编号</view>
					<view class="order_no_num">{{ orderItem.orderNo }}</view>
				</view>
			</view>
			<view class="communicate">
				<view class="communicate_title">
					<view class="communicate_icon">
						<image src="../../static/img/communicate_icon.png"></image>
					</view>
					<view class="communicate_text">电话沟通情况</view>
				</view>
				<view class="problem">
					<view class="problem_text">预计问题</view>
					<view class="problem_input" :class="[required1?'':'required']">
						<u-input class="weui-input" @input="problem_inputs" placeholder="请输入预计问题" type="text"
							v-model="questionForm.advProblem" />
					</view>
				</view>
				<view class="communicate_situation">
					<view class="communicate_situation_title">沟通情况</view>
					<view :class="[required2?'communicate_situation_text':'communicate_situation_text required']">
						<u-textarea placeholder="请输入沟通情况" @input="communicate_input" v-model="questionForm.commoncate" />
					</view>
				</view>
				<view class="to_door">
					<view class="to_door_text">是否上门</view>
					<view class="to_door_check">
						<u-radio-group v-model="questionForm.dropInStatus" @change="radioChange1">
							<u-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in items" :key="index"
								:label="item.name" :name="item.value" activeColor="#3057be">
							</u-radio>
						</u-radio-group>
						<!-- <u-radio-group @change="radioChange1">
							<label v-for="(item,index) in items" :key="index">
								<view class="weui-cell__bd" :style="{color:item.checked? '#3057be' : '#a2a2a2'}">{{ item.name }}</view>
								<view class="weui-cell__hd">
									<u-radio v-model="item.value" activeColor="#3057be" />
								</view>
							</label>
						</u-radio-group> -->
					</view>
				</view>
			</view>
			<view class="door_time" v-if="questionForm.dropInStatus">
				<view class="time_summary">
					<view class="time_summary_icon">
						<image src="../../static/img/door_time.png"></image>
					</view>
					<view class="time_summary_text">上门时间</view>
					<!-- <view class="door_time_content">{{ questionForm.dropTime }}</view> -->
				</view>
				<view class="check_date">
					<view class="tool"></view>
					<u-cell-group>
						<u-cell size="small" title="日期：" @click="show1=true" isLink :value="questionForm.dropTime"></u-cell>
					</u-cell-group>
				</view>
			</view>
			
			<u-datetime-picker :show="show1" v-model="questionForm.date1" mode="datetime" @cancel="show1=false" @confirm="bindDateChange1" :minDate="minDate"></u-datetime-picker>
			
			<view class="parts" v-if="questionForm.dropInStatus">
				<view class="parts_title">
					<view class="parts_title_icon">
						<image src="../../static/img/parts_icon.png"></image>
					</view>
					<view class="parts_title_text">预计配件</view>
				</view>
				<view class="parts_replace">
					<view class="parts_replace_text">预计更换配件</view>
					<view class="parts_replace_check">
						<u-radio-group v-model="questionForm.advPartStatus" @change="radioChange2">
							<u-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in items_parts" :key="index"
								:label="item.name" :name="item.value" activeColor="#3057be">
							</u-radio>
						</u-radio-group>
						<!-- <u-radio-group @change="radioChange2">
							<label v-for="(item,index) in items_parts" :key="index">
								<view class="weui-cell__bd" :style="{color:item.checked? '#3057be' : '#a2a2a2'}">{{ item.name }}</view>
								<view class="weui-cell__hd">
									<u-radio v-model="item.value" activeColor="#3057be" />
								</view> 
							</label>
						</u-radio-group> -->
					</view>
				</view>
				<view :class="[required4?'parts_text':'parts_text required']">
					<view class="parts_replace_text">配件描述</view>
					<u-textarea placeholder="请输入预计需要配件明细（配件名称、品牌、型号、数量）" @input="parts_inputs" v-model="questionForm.advPart"
						:disabled="!questionForm.advPartStatus" />
				</view>
			</view>

			<view class="door_time" v-if="questionForm.dropInStatus && questionForm.advPartStatus">
				<view class="time_summary">
					<view class="time_summary_icon">
						<image src="../../static/img/door_time.png"></image>
					</view>
					<view class="time_summary_text">预计配件时间</view>
					<!-- <view class="door_time_content">{{ questionForm.advPartTime }}</view> -->
				</view>
				<view class="check_date">
					<view class="tool"></view>
					<u-cell-group>
						<u-cell size="small" title="日期：" @click="show=true" isLink :value="questionForm.advPartTime"></u-cell>
					</u-cell-group>
				</view>
			</view>
			
			<u-datetime-picker :show="show" v-model="questionForm.date" mode="datetime" @cancel="show=false" @confirm="bindDateChange" :minDate="minDate"></u-datetime-picker>
			
			
			<view class="btn">
				<view @click="to_confirm">提交</view>
			</view>
			<view class="kefu" @click="call_kufu">
				<view class="button-name">
					<image style="width: 90rpx;height: 90rpx;" src="../../static/img/call_kefu.png"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show:false,
				show1:false,
				minDate:'',
				order_no: '',
				tel: '12321311',
				items: [{
						value: false,
						name: '否'
					},
					{
						value: true,
						name: '是',
					}
				],
				items_parts: [{
						value: true,
						name: '需要'
					},
					{
						value: false,
						name: '不需要',
					}
				],
				// 必填项
				required1: true,
				required2: true,
				required4: true,

				orderItem: {},

				questionForm: {
					dropInStatus: true, //是否上门判断
					date: '', //日期
					date1: '', //日期
					rWorkerId: "", //维修工名称
					rNum: "", //订单编号
					advProblem: "", //预计问题
					commoncate: "", //沟通情况
					dropTime: "", //上门时间
					advPartStatus: true, //是否需要更换配件 1需要 2不需要
					advPart: "", //需要的配件
					advPartTime: "", //需要配件到场时间

					/* 
					dealAddress:"",//处理地址
					dealResult:"",//处理结果 0 --为完成 1–未完成
					dealTime:"",//处理时间
					finishPartTime:"",//配件完成时间
					finishPics:"",//完成图片
					finishPics2:"",//完成图片2
					finishVideo:"",//完成视频
					id:"",//id
					jobAnalysis:"",//工作分析
					otherMemo:"",//其它说明
					repairPartnerId:"",//合作维修工id
					repairPartnerName:"",//合作维修工姓名
					repairType:"",//维修类型 1 独自维修 2 合作维修
					spoilMemo:"",//损坏原因
					 */
				}
			};
		},
		methods: {
			to_order() {
				uni.navigateTo({
					url: `/pagesIndex/confirm_order/confirm_order?orderItem=${JSON.stringify(this.orderItem)}&statusData=详情`
				});
			},
			call_user() {
				uni.makePhoneCall({
					phoneNumber: this.orderItem.phoneno
				});
			},
			call_kefu() {
				uni.makePhoneCall({
					phoneNumber: '1234567'
				});
			},
			problem_inputs(e) {
				this.questionForm.advProblem = e
				if (this.questionForm.advProblem != '') {
					this.required1 = true
				} else if (this.questionForm.advProblem == '') {
					this.required1 = false
				}
			},
			communicate_input(e) {
				this.questionForm.commoncate = e
				if (this.questionForm.commoncate != '') {
					this.required2 = true
				} else if (this.questionForm.commoncate == '') {
					this.required2 = false
				}
			},
			parts_inputs(e) {
				this.questionForm.advPart = e
				if (this.questionForm.advPart != '') {
					this.required4 = true
				} else if (this.questionForm.advPart == '') {
					this.required4 = false
				}
			},
			radioChange1(e) {
				this.questionForm.dropInStatus = e
				const items = this.items;
				for (let i = 0, len = items.length; i < len; ++i) {
					items[i].checked = items[i].value === e
				}
				this.items = items
			},
			radioChange2(e) {
				this.questionForm.advPart = ''
				const items = this.items_parts;
				for (let i = 0, len = items.length; i < len; ++i) {
					items[i].checked = items[i].value === e
				}
				this.items_parts = items
			},
			bindDateChange(e) {
				let date = new Date(e.value)
				// 获取年月日时分秒
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，补0
				const day = String(date.getDate()).padStart(2, '0');
				const hours = String(date.getHours()).padStart(2, '0');
				const minutes = String(date.getMinutes()).padStart(2, '0');
				const seconds = String(date.getSeconds()).padStart(2, '0');
				// 格式化为 YYYY-MM-DD HH:mm:ss
				const formattedDate = `${year}-${month}-${day} ${hours}:${minutes}`;
				this.questionForm.advPartTime = formattedDate
				this.show = false
			},
			bindDateChange1(e) {
				let date = new Date(e.value)
				// 获取年月日时分秒
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，补0
				const day = String(date.getDate()).padStart(2, '0');
				const hours = String(date.getHours()).padStart(2, '0');
				const minutes = String(date.getMinutes()).padStart(2, '0');
				const seconds = String(date.getSeconds()).padStart(2, '0');
				// 格式化为 YYYY-MM-DD HH:mm:ss
				const formattedDate = `${year}-${month}-${day} ${hours}:${minutes}`;
				this.questionForm.dropTime = formattedDate
				this.show1 = false
			},
			kefuCall() {
				uni.makePhoneCall({
					phoneNumber: '65667517',
					complete() {}
				});
			},
			to_confirm() {
				/* let date = new Date();
				let seperator1 = '-';
				let seperator2 = ':';
				let month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
				let strDate = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
				let currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate + ' ' + date.getHours() +
					seperator2 + date.getMinutes() + seperator2 + date.getSeconds()
				*/
				this.questionForm.rNum = this.orderItem.orderNo
				this.questionForm.rWorkerId = getApp().globalData.rworkerId

				console.log(this.questionForm);
				if (!this.questionForm.advProblem || this.questionForm.advProblem == '') {
					uni.showToast({
						title: '请填写预计问题',
						icon: 'none',
						duration: 1000 //持续的时间
					});
					return
				}
				if (!this.questionForm.commoncate || this.questionForm.commoncate == '') {
					uni.showToast({
						title: '请填写沟通情况',
						icon: 'none',
						duration: 1000 //持续的时间
					});
					return
				}
				if (this.questionForm.dropInStatus && (!this.questionForm.dropTime || this.questionForm.dropTime ==
						'')) {
					uni.showToast({
						title: '请选择上门时间',
						icon: 'none',
						duration: 1000 //持续的时间
					});
					return
				}
				if (this.questionForm.advPartStatus && this.questionForm.dropInStatus && (!this.questionForm.advPart ||
						this.questionForm.advPart == '')) {
					uni.showToast({
						title: '请填写配件明细',
						icon: 'none',
						duration: 1000 //持续的时间
					});
					return
				}
				/* uni.reLaunch({
					url: '/pagesIndex/up_parts/up_parts'
				}); */
				if (this.questionForm.dropInStatus) {
					/* uni.showToast({
						title: '请填写完整信息',
						icon: 'none',
						duration: 2000 //持续的时间
					}); */
					this.$newapi.repairDealInsert(this.questionForm).then(res => {
						if(res.code == 200){
							let obj = {
								id:this.orderItem.id,
								orderNo: this.orderItem.orderNo,
								orderStatus: 3,
								transferMessage: "",
								type: 3,
								workName: getApp().globalData.nickName
							}
							this.$newapi.updateOrder(obj).then(response=>{
								if(response.code==200){
									uni.reLaunch({
										url: '/pagesIndex/up_parts/up_parts'
									});
								}
							})
						}else{
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000 //持续的时间
							});
						}
					});
				}
			},
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {
			this.minDate = Date.now()
			this.orderItem = JSON.parse(options.orderItem)
			/* this.$user.getRepairByNo(data).then(res => {
				this.tel=res.data.rPhoneNo
			}); */
		}
	};
</script>

<style lang="less" scoped>
	::v-deep .u-radio-group--row {
		justify-content: space-around !important;
	}

	.receiving_orders {
		width: 100%;
		// height: 1498rpx;
		background-image: url(https://www.bjroyalkitchen.com/images/root/20210511003.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		height: 100vh;
		overflow-y: auto;
	}

	.call_user {
		width: 100%;
		height: 100rpx;
		background-color: #ffffff;
		box-shadow: 0 6rpx 14rpx rgba(162, 162, 162, 0.1);
	}

	.call_user_content {
		width: 90%;
		height: 100%;
		margin: 0 auto;
		display: flex;
		flex-direction: row;
	}

	.call_user_left {
		width: 80%;
		height: 100%;
		display: flex;
		flex-direction: row;
	}

	.call_user_left view:nth-child(1) {
		width: 50rpx;
		height: 100%;
	}

	.call_user_left view:nth-child(1) image {
		width: 30rpx;
		height: 30rpx;
		margin-top: 35rpx;
	}

	.call_user_left view:nth-child(2) {
		width: 70%;
		height: 100%;
		font-size: 30rpx;
		line-height: 100rpx;
		text-align: left;
		color: #333333;
	}

	.call_user_right {
		width: 30%;
		height: 100%;
		display: flex;
		flex-direction: row;
	}

	.call_user_right view:nth-child(1) {
		width: 70%;
		height: 100%;
		font-size: 30rpx;
		line-height: 100rpx;
		text-align: right;
		color: #333333;
	}

	.call_user_right view:nth-child(2) {
		width: 50rpx;
		height: 100%;
	}

	.call_user_right view:nth-child(2) image {
		width: 50rpx;
		height: 50rpx;
		margin-top: 27rpx;
	}

	.order_detail {
		width: 100%;
		height: 185rpx;
		margin-top: 20rpx;
		background-color: rgba(255, 255, 255, .55);
		box-shadow: 0 6rpx 14rpx rgba(162, 162, 162, 0.1);
	}

	.order_detail_item1 {
		width: 90%;
		height: 80rpx;
		display: flex;
		flex-direction: row;
		margin: 0 auto;
	}

	.order_detail_item2 {
		width: 90%;
		height: 104rpx;
		display: flex;
		flex-direction: row;
		margin: 0 auto;
		margin-top: 0.5rpx;
	}

	.order_detail_icon {
		width: 8%;
		height: 100%;
	}

	.order_detail_icon image {
		width: 30rpx;
		height: 30rpx;
		margin-top: 25rpx;
	}

	.order_detail_text {
		width: 70%;
		height: 100%;
		font-size: 30rpx;
		color: #333333;
		line-height: 80rpx;
		text-align: left;
	}

	.to_order_detail {
		width: 22%;
		height: 100%;
	}

	.to_order_detail image {
		width: 30rpx;
		height: 30rpx;
		margin-top: 25rpx;
		float: right;
	}

	.order_no_text {
		width: 20%;
		height: 100%;
		line-height: 80rpx;
		text-align: left;
		font-size: 30rpx;
		color: #a2a2a2;
	}

	.order_no_num {
		width: 80%;
		height: 100%;
		line-height: 80rpx;
		text-align: left;
		font-size: 30rpx;
		color: #333333;
	}

	.communicate {
		width: 702rpx;
		margin-top: 20rpx;
		margin-left: auto;
		margin-right: auto;
		background-color: rgba(255, 255, 255, .55);
		border-radius: 20rpx;
	}

	.communicate_title {
		width: 654rpx;
		height: 80rpx;
		display: flex;
		flex-direction: row;
		margin: 0 auto;
	}

	.communicate_icon {
		width: 10%;
		height: 100%;
	}

	.communicate_icon image {
		width: 39rpx;
		height: 32rpx;
		margin-top: 24rpx;
	}

	.communicate_text {
		width: 90%;
		height: 100%;
		line-height: 80rpx;
		text-align: left;
		font-size: 30rpx;
		color: #333333;
	}

	.problem {
		width: 654rpx;
		height: 80rpx;
		display: flex;
		flex-direction: row;
		margin: 0 auto;
	}

	.problem_text {
		width: 22%;
		height: 100%;
		line-height: 75rpx;
		text-align: left;
		font-size: 30rpx;
		color: #a2a2a2;
	}

	.problem_input {
		width: 78%;
		height: 100%;
	}

	.weui-input {
		width: 100%;
		height: 60rpx;
		padding-top: 10rpx;
		color: black;
		font-size: 30rpx;
		/* font-weight: bold; */
	}

	.phcolor {
		color: #a2a2a2;
	}

	.communicate_situation {
		width: 654rpx;
		margin: 0 auto;
	}

	.communicate_situation_title {
		width: 100%;
		height: 50rpx;
		line-height: 50rpx;
		text-align: left;
		font-size: 30rpx;
		color: #a2a2a2;
	}

	.communicate_situation_text {
		width: 636rpx;
		border-radius: 20rpx;
		background-color: #f2f2f2;
		padding: 10rpx;
	}

	.communicate_situation_text textarea {
		width: 100%;
		height: 100%;
		/* margin: 0 auto; */
		font-size: 30rpx;
		/* background-color: #f8f8f8; */
		/* border-radius: 10rpx;
	  padding: 10rpx; */
	}

	.to_door {
		width: 90%;
		height: 80rpx;
		margin: 0 auto;
		display: flex;
		flex-direction: row;
	}

	.to_door_text {
		width: 60%;
		height: 100%;
		line-height: 80rpx;
		text-align: left;
		font-size: 30rpx;
		color: #a2a2a2;
	}

	.to_door_check {
		width: 40%;
		height: 100%;
		padding-top: 20rpx;
		box-sizing: border-box;
	}

	radio-group {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: row;
	}

	label {
		width: 50%;
		height: 100%;
		display: flex;
		flex-direction: row;
	}

	label view:nth-child(1) {
		width: 50%;
		height: 100%;
		line-height: 80rpx;
		font-size: 30rpx;
		text-align: right;
	}

	label view:nth-child(2) {
		width: 50%;
		height: 100%;
	}

	radio {
		width: 50rpx;
		height: 50rpx;
		margin-top: 15rpx;
		display: inline-block;
		transform: scale(0.6);
	}

	.door_time {
		width: 702rpx;
		// height: 240rpx;
		background-color: rgba(255, 255, 255, .55);
		border-radius: 20rpx;
		margin-top: 20rpx;
		margin-left: auto;
		margin-right: auto;
	}

	.time_summary,
	.check_date,
	.check_time {
		width: 90%;
		height: 80rpx;
		margin: 0 auto;
	}

	.time_summary {
		display: flex;
		flex-direction: row;
	}

	.time_summary_icon {
		width: 8%;
		height: 100%;
	}

	.time_summary_icon image {
		width: 30rpx;
		height: 30rpx;
		margin-top: 25rpx;
	}

	.time_summary_text {
		width: 30%;
		height: 100%;
		line-height: 80rpx;
		text-align: left;
		color: #a2a2a2;
		font-size: 30rpx;
	}

	.door_time_content {
		width: 72%;
		height: 100%;
		line-height: 80rpx;
		text-align: left;
		color: #333333;
		font-size: 30rpx;
	}

	.check_date,
	.check_time {
		display: flex;
		flex-direction: row;
	}

	.tool {
		width: 8%;
		height: 100%;
	}

	.picker {
		width: 90%;
		height: 100%;
	}

	.picker view {
		height: 100%;
		line-height: 80rpx;
		text-align: left;
		color: #a2a2a2;
		font-size: 30rpx;
	}

	.parts {
		width: 702rpx;
		// height: 360rpx;
		background-color: rgba(255, 255, 255, .55);
		border-radius: 20rpx;
		margin-top: 20rpx;
		margin-left: auto;
		margin-right: auto;
	}

	.parts_title {
		width: 90%;
		height: 80rpx;
		margin: 0 auto;
		display: flex;
		flex-direction: row;
	}

	.parts_title_icon {
		width: 10%;
		height: 100%;
	}

	.parts_title_icon image {
		width: 35rpx;
		height: 35rpx;
		margin-top: 22.5rpx;
	}

	.parts_title_text {
		width: 90%;
		height: 100%;
		line-height: 80rpx;
		text-align: left;
		font-size: 30rpx;
		color: #333333;
	}

	.parts_replace {
		width: 90%;
		height: 80rpx;
		margin: 0 auto;
		display: flex;
		flex-direction: row;
	}

	.parts_replace_text {
		width: 50%;
		height: 100%;
		line-height: 80rpx;
		text-align: left;
		font-size: 30rpx;
		color: #a2a2a2;
	}

	.parts_replace_check {
		width: 50%;
		height: 100%;
		padding-top: 20rpx;
		box-sizing: border-box;
	}

	.parts_text {
		width: 90%;
		// height: 110rpx;
		border-radius: 20rpx;
		// background-color: #f2f2f2;
		padding: 10rpx;
		margin: 0 auto;
	}

	.parts_text textarea {
		width: 100%;
		height: 100%;
		font-size: 30rpx;
	}

	.btn {
		width: 90%;
		height: 100rpx;
		margin-left: auto;
		margin-right: auto;
		margin-top: 40rpx;
	}

	.btn view {
		width: 30%;
		height: 60%;
		font-size: 30rpx;
		text-align: center;
		line-height: 60rpx;
		color: white;
		border-radius: 10rpx;
		letter-spacing: 2rpx;
		background-color: rgb(75, 85, 174);
		margin: 0 auto;
	}

	.kefu {
		// width: 100%;
		height: 90rpx;
		position: fixed;
		bottom: 100rpx;
		right: 0;
	}
	
	.button-name:not([size='mini']) {
		width: 90rpx;
		height: 90rpx;
		float: right;
		padding: 0;
	}

	.required {
		border: 1px solid #f56c6c;
	}

	.required1 {
		color: #f56c6c !important;
	}
</style>